<ng-container *ngIf="!loading; else isLoading">
  <cd-alert-panel *ngIf="error"
                  type="error"
                  i18n>Failed to retrieve SMART data.</cd-alert-panel>
  <cd-alert-panel *ngIf="incompatible"
                  type="warning"
                  i18n>The data received has the JSON format version 2.x and is currently incompatible with the
    dashboard.</cd-alert-panel>

  <ng-container *ngIf="!error && !incompatible">
    <cd-alert-panel *ngIf="data | pipeFunction:isEmpty"
                    type="info"
                    i18n>No SMART data available.</cd-alert-panel>

    <ng-container *ngIf="!(data | pipeFunction:isEmpty)">
      <ul ngbNav
          #nav="ngbNav"
          class="nav-tabs">
        <li ngbNavItem
            *ngFor="let device of data | keyvalue">
          <a ngbNavLink>{{ device.value.device }} ({{ device.value.identifier }})</a>
          <ng-template ngbNavContent>
            <ng-container *ngIf="device.value.error; else noError">
              <cd-alert-panel id="alert-error"
                              type="warning">{{ device.value.userMessage }}</cd-alert-panel>
            </ng-container>

            <ng-template #noError>
              <cd-alert-panel *ngIf="device.value.info?.smart_status | pipeFunction:isEmpty; else hasSmartStatus"
                              id="alert-self-test-unknown"
                              size="slim"
                              type="warning"
                              i18n-title
                              title="SMART overall-health self-assessment test result"
                              i18n>unknown</cd-alert-panel>
              <ng-template #hasSmartStatus>
                <!-- HDD/NVMe self test -->
                <ng-container *ngIf="device.value.info.smart_status.passed; else selfTestFailed">
                  <cd-alert-panel id="alert-self-test-passed"
                                  size="slim"
                                  type="info"
                                  i18n-title
                                  title="SMART overall-health self-assessment test result"
                                  i18n>passed</cd-alert-panel>
                </ng-container>
                <ng-template #selfTestFailed>
                  <cd-alert-panel id="alert-self-test-failed"
                                  size="slim"
                                  type="warning"
                                  i18n-title
                                  title="SMART overall-health self-assessment test result"
                                  i18n>failed</cd-alert-panel>
                </ng-template>
              </ng-template>
            </ng-template>

            <ng-container *ngIf="!(device.value.info | pipeFunction:isEmpty) || !(device.value.smart | pipeFunction:isEmpty)">
              <ul ngbNav
                  #innerNav="ngbNav"
                  class="nav-tabs">
                <li [ngbNavItem]="1">
                  <a ngbNavLink
                     i18n>Device Information</a>
                  <ng-template ngbNavContent>
                    <cd-table-key-value *ngIf="!(device.value.info | pipeFunction:isEmpty)"
                                        [renderObjects]="true"
                                        [data]="device.value.info"></cd-table-key-value>
                    <cd-alert-panel *ngIf="device.value.info | pipeFunction:isEmpty"
                                    id="alert-device-info-unavailable"
                                    type="info"
                                    i18n>No device information available for this device.</cd-alert-panel>
                  </ng-template>
                </li>
                <li [ngbNavItem]="2">
                  <a ngbNavLink
                     i18n>SMART</a>
                  <ng-template ngbNavContent>
                    <cd-table *ngIf="device.value.smart?.attributes"
                              [data]="device.value.smart.attributes.table"
                              updateSelectionOnRefresh="never"
                              [columns]="smartDataColumns"></cd-table>
                    <cd-table-key-value *ngIf="device.value.smart?.scsi_error_counter_log"
                                        [renderObjects]="true"
                                        [data]="device.value.smart"
                                        updateSelectionOnRefresh="never"></cd-table-key-value>
                    <cd-table-key-value *ngIf="device.value.smart?.nvmeData"
                                        [renderObjects]="true"
                                        [data]="device.value.smart.nvmeData"
                                        updateSelectionOnRefresh="never"></cd-table-key-value>
                    <cd-alert-panel *ngIf="!device.value.smart?.attributes && !device.value.smart?.nvmeData && !device.value.smart?.scsi_error_counter_log"
                                    id="alert-device-smart-data-unavailable"
                                    type="info"
                                    i18n>No SMART data available for this device.</cd-alert-panel>
                  </ng-template>
                </li>
              </ul>

              <div [ngbNavOutlet]="innerNav"></div>
            </ng-container>
          </ng-template>
        </li>
      </ul>

      <div [ngbNavOutlet]="nav"></div>
    </ng-container>
  </ng-container>
</ng-container>
<ng-template #isLoading>
  <cd-loading-panel i18n>SMART data is loading.</cd-loading-panel>
</ng-template>
